<template>
    <view class="content">
        <map style="width: 750rpx; height: 100vh;" id="map" :latitude="latitude" :longitude="longitude" 
            :markers="covers" :show-location="true" :scale="14" :enable-building="true" :enable-poi="true"></map>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                covers: [],
                // latitude: '',
                // longitude: '',
                latitude: 43.825092,
                longitude: 125.254872,
            };
        },
        onLoad() {
            // #ifdef APP-PLUS
            var galleryPermission = plus.navigator.checkPermission("LOCATION");
            if (galleryPermission == "undetermined") {
                this.$toast('位置权限使用说明：用于展示用户周边位置信息');
            }
            // #endif
            this.$getLocation((latitude,longitude) => {
                // console.log('000',latitude, longitude)
                this.latitude = latitude
                this.longitude = longitude
            })
        },
        onShow() {
            this.getDate()
        },
        methods: {
            getDate() {
                this.$ajax('region_map', {
                    // user_token: this.$getSync('userToken'),
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.covers = []
                        var arr = []
                        var obj = {
                            color: '#000000',
                            bgColor: '#a6e4ff',
                            fontSize: 20,
                            borderRadius: 50,
                            padding: 10,
                            display: 'ALWAYS',
                            textAlign: 'center',
                            // anchorX: 0,
                            // anchorY: 0,
                        }
                        var objLa = {
                            color: '#000000',
                            fontSize: 20,
                            bgColor: '#a6e4ff',
                            borderRadius: 50,
                            padding: 10,
                            textAlign: 'center',
                            // anchorX: 0,
                            // anchorY: 0,
                        }
                        ret.detail.data.forEach((cur, index) => {
                            this.$set(cur, 'label', {})
                            cur.label = {...cur.callout, ...objLa}
                            // cur.callout = {...cur.callout, ...obj}
                            var obj2 = {
                                id: cur.region_id,
                                iconPath: '/static/icon/add_01.png',
                                width: 23,
                                height: 35,
                                latitude: Number(cur.latitude),
                                longitude: Number(cur.longitude),
                                // callout: cur.callout,
                                label: cur.label,
                            }
                            arr.push(obj2)
                        })
                        this.covers = arr
                        console.log(this.covers)
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
</style>
